Using the Image node

Use the Image node to show a bitmap image.

Use image files to bring bitmap assets to Kanzi Studio. You can import images to Kanzi in these file formats:

• .png, including the alpha channel
• .tga, including the alpha channel
• .psd, including layers. See Importing Adobe Photoshop files with layers.
• .dds, can contain cubemaps, mipmaps, or both.
• .bmp, .exr, .gif, .hdr, .ico, .iff, .jng, .jpg, .jpeg, .jif, .mng, .pcx, .pmb, .pgm, .ppm, .pfm, .pict, .ras, .sgi, .tiff, .tif, .wbmp, .xmb, and .xpm.

Creating an Image node

To create an Image node:

1. In the Assets window click Import Assets.
   
2. Select the files you want to import and click Open.

3. Drag an image from the Assets and drop either in the Preview or any 2D node in the scene graph in the Project.

or

1. In the Project press Alt and right-click the node where you want to create an Image node and select Image.
   Note that you can create a 3D node only inside 3D nodes, and 2D node only inside 2D nodes.
2. In the Properties set the Image property to the image you want the Image node to show.
   The Image node inherits the width and height from the image set in the Image property. To set a different size, add and set properties:
   • Layout Width and Layout Height to set the size of the Image node.
   • Content Stretch to set how Kanzi stretches the content of the Image node.
3. Set the image position by setting the Horizontal Alignment and Vertical Alignment properties.

Setting the image target format

When you export your project to a kzb file, Kanzi Studio reads the images in the project using the format of the original image and writes the images to a kzb file in the format you set with the Target Format property for each image.

If the file format of the original image is the same as the format you select in the Target Format property, Kanzi does not modify the image when it writes the image to a kzb file under these conditions:

• Premultiply Alpha is disabled, or the alpha channel does not need to be premultiplied
  You can set the value of the Premultiply Alpha property in the Project > Properties and in the properties for each image file.
• Generate Mipmaps is disabled
  You can set the value of the Generate Mipmaps property in each image file.
• Round Images to Nearest Power of 2 property is disabled
  You can set the value of the Round Images to Nearest Power of 2 property in the Project > Properties.

To set the target format for an image in your Kanzi Studio project:

1. In the Library > Resource Files > Images select the image for which you want to set the target format.
2. In the Properties set the Target Format property to the image format you want to use in your Kanzi application.
   The format you select is important because this influences the size of the .kzb binary and the loading time when your Kanzi application needs the resource. Make sure that your target device supports the target format you select for the image. See Images and textures best practices.
3. If the image format you selected in the previous step supports compression, select the compression scheme you want to use. See Compressing textures.

Setting the background of an Image node

Use brushes to set the background of 2D nodes. In Kanzi all 2D nodes by default have transparent background.

To set the background:

1. Create a Color Brush, a Texture Brush, or a Material Brush. See Using brushes.
   
2. In the Project select the 2D node the background of which you want to paint.
   Note that you can set only the background of 2D nodes.
3. In the Properties click , add the Background Brush property, and select the brush you created in the first step.
   

Using the Image node in the API

For details, see the API reference.

See also

Using mipmaps

Images and textures best practices

Using triggers

Open topic with navigation